<template>
  <div>
    <div class="relative min-h-screen flex">
      <div
        class="
          flex flex-col
          sm:flex-row
          items-center
          md:items-start
          sm:justify-center
          md:justify-start
          flex-auto
          min-w-0
          bg-white
        "
      >
        <div
          class="
            sm:w-1/2
            xl:w-3/5
            h-full
            hidden
            md:flex
            flex-auto
            items-center
            justify-center
            p-10
            overflow-hidden
            bg-purple-900
            text-white
            bg-no-repeat bg-cover
            relative
            bgimg
          "
        >
          <div
            class="
              absolute
              bg-gradient-to-b
              from-indigo-600
              to-blue-500
              opacity-75
              inset-0
              z-0
            "
          ></div>
          <div class="w-full max-w-md z-10">
            <div class="sm:text-4xl xl:text-5xl font-bold leading-tight mb-6">
              欢迎光临
            </div>
            <div class="sm:text-sm xl:text-md text-gray-200 font-normal">
              欢迎来到农业用水综合管理平台
            </div>
          </div>
          <ul class="circles">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </div>
        <div
          class="
            md:flex md:items-center md:justify-center
            w-full
            sm:w-auto
            md:h-full
            w-2/5
            xl:w-2/5
            p-8
            md:p-10
            lg:p-14
            sm:rounded-lg
            md:rounded-none
            bg-white
          "
        >
          <div class="max-w-md w-full mx-auto space-y-8">
            <div class="text-center">
              <h2 class="mt-6 text-3xl font-bold text-gray-900">
                <img
                  src="../assets/img/logo2.png"
                  alt=""
                  style="width: 160px; height: 145px; margin: 0 auto"
                />
              </h2>
              <h2 class="mt-6 text-3xl font-bold text-gray-900">欢迎回来</h2>
            </div>

            <div class="flex items-center justify-center space-x-2">
              <span class="h-px w-16 bg-gray-200"></span>
              <span class="text-gray-300 font-normal">使用账号密码登录</span>
              <span class="h-px w-16 bg-gray-200"></span>
            </div>
            <form class="mt-8 space-y-6" action="#" method="POST">
              <input type="hidden" name="remember" value="true" />
              <div class="relative">
                <label
                  class="ml-3 text-sm font-bold text-gray-700 tracking-wide"
                  >账号</label
                >
                <input
                  class="
                    w-full
                    text-base
                    px-4
                    py-2
                    border-b border-gray-300
                    focus:outline-none
                    rounded-2xl
                    focus:border-indigo-500
                  "
                  type=""
                  placeholder="请输入账号"
                  v-model="loginForm.username"
                />
              </div>
              <div class="mt-8 content-center">
                <label
                  class="ml-3 text-sm font-bold text-gray-700 tracking-wide"
                  >密码</label
                >
                <input
                  class="
                    w-full
                    content-center
                    text-base
                    px-4
                    py-2
                    border-b
                    rounded-2xl
                    border-gray-300
                    focus:outline-none focus:border-indigo-500
                  "
                  type="password"
                  placeholder="请输入密码"
                  v-model="loginForm.password"
                />
              </div>

              <div class="flex items-center justify-between">
                <div class="flex items-center" style="width: 45%">
                  <input
                    class="
                      w-full
                      content-center
                      text-base
                      px-4
                      py-2
                      border-b
                      rounded-2xl
                      border-gray-300
                      focus:outline-none focus:border-indigo-500
                    "
                    type=""
                    v-model="inputCode"
                    placeholder="请输入验证码"
                  />
                </div>
                <div class="text-sm" style="width: 45%">
                  <a href="#" class="text-indigo-400 hover:text-blue-500"
                    ><img :src="imgSrc" alt=""
                  /></a>
                </div>
              </div>
              <div>
                <button
                  type="button"
                  class="
                    w-full
                    flex
                    justify-center
                    bg-gradient-to-r
                    from-indigo-500
                    to-blue-600
                    hover:bg-gradient-to-l
                    hover:from-blue-500
                    hover:to-indigo-600
                    text-gray-100
                    p-4
                    rounded-full
                    tracking-wide
                    font-semibold
                    shadow-lg
                    cursor-pointer
                    transition
                    ease-in
                    duration-500
                  "
                   @click="handleLogin"
                >
                  登 录
                </button>
              </div>
              <p
                class="
                  items-center
                  justify-center
                  mt-10
                  text-center text-md text-gray-500
                "
              ></p>
            </form>
          </div>
        </div>
      </div>
    </div>

    <div
      style="
        position: fixed;
        bottom: 10px;
        font-size: 16px;
        display: block;
        width: 100%;
        text-align: center;
        color: #fff;
        letter-spacing: 2px;
      "
    >
      <a>版权所有　© 山东三诚智慧农业科技有限公司</a>
    </div>
  </div>
</template>

<script>
import { login } from '@/api/login'
export default {
  name: "Login2",
  data() {
    return {
      loginForm: {
        username: '',
        password: '',
        rememberMe: true
      },
      loading: false,
      redirect: undefined,
      imgSrc:'',
      code:'',
      inputCode:''
    };
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  mounted(){
    this.getImg();
  },
  methods: {
    handleLogin() {
        if(this.code.toLowerCase()!=this.inputCode.toLowerCase()){
          this.$message.error('验证码输入有误');
        }else{
          const data = {
            loginName: this.loginForm.username,
            password: this.loginForm.password
          }
         
          this.loading = true
          this.axios.request({
            method: "POST", 
            url: 'http://47.104.26.124:8080/zhny/login/login',
            params:data
          }).then((res) => {
            this.loading = false
            console.log(res)
            if(res.data.code==1000){
              localStorage.setItem("userInfo",JSON.stringify(res.data.data));
              this.$router.push({ path: '/home/home' })
            }else{
              this.$message.error('登录失败');
            }
            
          }).catch((err) => {
            console.log(err)
          })
        }
    },
    getImg(){
      this.axios.request({
        method: "get", 
        url: 'http://47.104.26.124:8080/zhny/login/getCaptcha',
      }).then((res) => {
        console.log(res.data.data)
        this.imgSrc = res.data.data.image;
        this.code = res.data.data.code;
      }).catch((err) => {
        console.log(err)
      })
    }
  }
};
</script>

<style>
@import "../assets/css/style.css";
@import "../assets/css/tailwind.min.css";
.bgimg{
   background-image: url('../assets/img/login_bg.png')
}
</style>
